<template>
  <view class="container">
    <!-- Question Section -->
    <view class="question-section">
      <view class="question-header">
        <text class="question-title">{{ question.title }}</text>
        <view class="question-meta">
          <text class="author">{{ question.author }}</text>
          <text class="date">{{ question.date }}</text>
        </view>
      </view>
      <text class="question-content">{{ question.content }}</text>
      <view class="question-tags">
        <text 
          v-for="(tag, index) in question.tags" 
          :key="index" 
          class="tag"
        >{{ tag }}</text>
      </view>
    </view>

    <!-- Replies Section -->
    <scroll-view scroll-y class="replies-section">
      <view class="replies-header">
        <text class="title">Replies ({{ replies.length }})</text>
        <u-button 
          type="primary" 
          size="mini"
          @click="showReplyInput = true"
        >Add Reply</u-button>
      </view>

      <view 
        v-for="(reply, index) in replies" 
        :key="index"
        class="reply-card"
      >
        <view class="reply-header">
          <view class="user-info">
            <image class="avatar" :src="reply.avatar" mode="aspectFill"></image>
            <text class="username">{{ reply.username }}</text>
          </view>
          <text class="reply-date">{{ reply.date }}</text>
        </view>
        <text class="reply-content">{{ reply.content }}</text>
        <view class="reply-actions">
          <view class="action" @click="handleLike(index)">
            <u-icon 
              :name="reply.isLiked ? 'thumb-up-fill' : 'thumb-up'" 
              :color="reply.isLiked ? '#4b7bec' : '#666'"
              size="28"
            ></u-icon>
            <text :class="{'liked': reply.isLiked}">{{ reply.likes }}</text>
          </view>
          <view class="action" @click="handleComment(index)">
            <u-icon name="chat" color="#666" size="28"></u-icon>
            <text>Reply</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Reply Input -->
    <u-popup v-model="showReplyInput" mode="bottom" height="40%">
      <view class="reply-input-container">
        <view class="input-header">
          <text class="title">Add Reply</text>
          <u-icon name="close" @click="showReplyInput = false"></u-icon>
        </view>
        <u-textarea
          v-model="newReply"
          placeholder="Write your reply here..."
          height="200"
        ></u-textarea>
        <view class="input-actions">
          <u-button @click="showReplyInput = false">Cancel</u-button>
          <u-button type="primary" @click="submitReply">Submit</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questionId: null,
      showReplyInput: false,
      newReply: '',
      question: {
        title: 'How does the nervous system interact with the endocrine system?',
        author: 'Medical Student',
        date: '2024-03-20 14:30',
        content: 'I\'m trying to understand the relationship between the nervous system and endocrine system. Can someone explain how they work together to maintain homeostasis?',
        tags: ['Physiology', 'Nervous System', 'Endocrine System']
      },
      replies: [
        {
          username: 'Dr. Johnson',
          avatar: '/static/avatar1.png',
          date: '2024-03-20 15:00',
          content: 'The nervous and endocrine systems work together through the hypothalamus-pituitary axis...',
          likes: 12,
          isLiked: false
        },
        {
          username: 'Med Student 2023',
          avatar: '/static/avatar2.png',
          date: '2024-03-20 15:30',
          content: 'Here\'s a simple way to remember it...',
          likes: 5,
          isLiked: false
        }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.questionId = options.id
      // TODO: Fetch question and replies data
    }
  },
  methods: {
    handleLike(index) {
      this.replies[index].isLiked = !this.replies[index].isLiked
      this.replies[index].likes += this.replies[index].isLiked ? 1 : -1
    },
    handleComment(index) {
      this.showReplyInput = true
    },
    submitReply() {
      if (!this.newReply.trim()) {
        uni.showToast({
          title: 'Please write something',
          icon: 'none'
        })
        return
      }

      const reply = {
        username: 'Current User', // TODO: Get from user profile
        avatar: '/static/default-avatar.png',
        date: new Date().toLocaleString(),
        content: this.newReply,
        likes: 0,
        isLiked: false
      }

      this.replies.push(reply)
      this.newReply = ''
      this.showReplyInput = false

      uni.showToast({
        title: 'Reply posted successfully',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.question-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .question-header {
    margin-bottom: 20rpx;

    .question-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .question-meta {
      display: flex;
      gap: 20rpx;
      font-size: 26rpx;
      color: #666;
    }
  }

  .question-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }

  .question-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .tag {
      background-color: rgba(75, 123, 236, 0.1);
      color: #4b7bec;
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }
}

.replies-section {
  flex: 1;
  padding: 30rpx;

  .replies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.reply-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .user-info {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
      }

      .username {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .reply-date {
      font-size: 24rpx;
      color: #999;
    }
  }

  .reply-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16rpx;
  }

  .reply-actions {
    display: flex;
    gap: 30rpx;

    .action {
      display: flex;
      align-items: center;
      gap: 8rpx;
      
      text {
        font-size: 26rpx;
        color: #666;

        &.liked {
          color: #4b7bec;
        }
      }
    }
  }
}

.reply-input-container {
  padding: 30rpx;

  .input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .input-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;

    :deep(.u-button) {
      flex: 1;
    }
  }
}
</style> 